<template>
    <div class="coupon">
        <Breadcrumb>
            <BreadcrumbItem>奖品</BreadcrumbItem>
            <BreadcrumbItem>卡券列表</BreadcrumbItem>
        </Breadcrumb>

        <div id="control">
            <router-link to="/activity-setting" v-if="coupon_win_odds == 0 && tr.length>0">未设置卡券的中奖率，点击前往设置</router-link>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<router-link to="/activity" v-if="address == ''">未设置奖品领取地址，点击前往设置</router-link>
            <Button class="put-button" type="primary" @click="clickPutCoupon">投放卡券</Button>
        </div>

        <!--S列表-->
        <Table :columns="th" :data="tr"></Table>
        <!--E列表-->


        <!--S设置活动宝藏抽屉-->
        <Drawer :title="this.doing == 'add' ? '投放卡券' : '修改卡券'" :closable="true" :mask-closable="false" v-model="coupon_drawer" :width="600">
            <Form ref="data" :model="data" :rules="rules">
                <FormItem prop="name" label="卡券名">
                    <Input type="text" v-model="data.name" placeholder="卡券名"></Input>
                </FormItem>
                <FormItem prop="icon" label="卡券奖品图片">
                    <ImgInput v-model="data.icon" @remove="data.icon = ''"></ImgInput>
                </FormItem>
                <FormItem prop="money" label="卡券奖品价值">
                    <Input type="text" v-model="data.money" placeholder="卡券奖品价值"></Input>
                </FormItem>
                <FormItem prop="number" label="投放数量">
                    <Input type="text" v-model.number="data.number" placeholder="投放数量"></Input>
                </FormItem>
                <FormItem prop="user_number" label="用户最多获得数量(0=不限制)">
                    <Input type="text" v-model.number="data.user_number" placeholder="用户最多获得数量"></Input>
                </FormItem>
                <FormItem prop="use_limit_type" label="卡券有效期类型">
                    <Select v-model="data.use_limit_type" @on-change="limitTypeChange">
                        <Option :value="1">永久有效</Option>
                        <Option :value="2">超时失效</Option>
                        <Option :value="3">领券计时失效</Option>
                    </Select>
                </FormItem>
                <FormItem prop="limit_time" v-if="data.use_limit_type > 1" :label="data.use_limit_type == 2 ? '卡券有效期' : '领取后几天失效(0=当天有效)'">
                    <template v-if="data.use_limit_type == 2">
                        <br /><DatePicker type="date" v-model="limit_time" placeholder="请选择卡券的有效期" style="width:100%" @on-change="limitDateChange"></DatePicker>
                    </template>
                    <template v-else>
                        <Input type="text" v-model.number="data.limit_time" placeholder="用户领取卡券后几天失效"></Input>
                    </template>
                </FormItem>
                <FormItem prop="rule" label="卡券核销规则">
                    <Input type="textarea" v-model="data.rule" placeholder="卡券核销规则，比如：使用此卡券需支付10元即可兑换某某商品一套"></Input>
                </FormItem>
                <FormItem prop="win_odds" label="中奖几率(1表示中奖率为100%，数字越大中奖率越低。多个中奖几率为1则随机投放其中一个)">
                    <Input type="text" v-model.number="data.win_odds" placeholder="中奖几率"></Input>
                </FormItem>
                <FormItem>
                    <Button @click="submit('data')" :loading="submit_loading">
                        <template v-if="this.doing == 'add'">确认投放</template>
                        <template v-else>修改投放</template>
                    </Button>
                </FormItem>
            </Form>
        </Drawer>
        <!--E设置活动宝藏抽屉-->
    </div>
</template>

<script>
    import ImgInput from "../../components/ImgInput/ImgInput";
    export default {
        name: 'sponsor-coupon',
        data(){
            var self = this;
            return {
                //--公共--
                activity_id:sysinfo.activity_id,
                coupon_id:0,  //操作的宝藏id
                doing:'add',  //添加或者修改宝藏
                coupon_win_odds:0, // 卡券的中奖率
                address:'',  //活动奖品兑换地址
                //列表
                th:[
                    {
                        title:'卡券名',
                        key:'name'
                    },
                    {
                        title:'奖品图标',
                        key:'icon_url',
                        render:(h,params)=>{
                            return h('img',{
                                attrs:{
                                    src:sysinfo.attachurl+params.row.icon
                                },
                                style:{
                                    width:'40px',
                                    height:'40px',
                                    verticalAlign:'middle',
                                    objectFit: 'contain'
                                }
                            });
                        }
                    },
                    {
                        title:'发放数量/投放数量',
                        key:'number',
                        render:(h,params)=>{
                            return h('span',{},params.row.give_number+'/'+params.row.number);
                        }
                    },
                    {
                        title:'用户最多获取数量',
                        key:'user_number'
                    },
                    {
                        title:'中奖率',
                        key:'win_odds',
                        render:(h,params)=>{
                            return h('span',{},1+'/'+params.row.win_odds);
                        }
                    },
                    {
                        title:'状态',
                        key:'status',
                        render:(h,params)=>{
                            return h('Button',{
                                props:{
                                    type:params.row.status == 1 ? 'info' : 'warning',
                                    size:'small'
                                },
                                on:{
                                    click:()=>{
                                        self.$Modal.confirm({
                                            title:'提示',
                                            content:params.row.status == 1 ? '确定要暂停投放吗？' : '确定要开始投放吗？',
                                            onOk:()=>{
                                                self.changeStatus(params.row.id,params.row.status == 1 ? 2 : 1);
                                            }
                                        });
                                    }
                                }
                            },params.row.status == 1 ? '正常' : '暂停投放');
                        }
                    },
                    {
                        title:'操作',
                        key:'control',
                        render:(h,params)=>{
                            return h('div',[
                                h('Button',{
                                    props:{
                                        type:'primary',
                                        size:'small'
                                    },
                                    style:{
                                        marginRight:'5px'
                                    },
                                    on:{
                                        click:()=>{
                                            this.doing = 'edit';
                                            this.coupon_id = params.row.id;
                                            this.data.name = params.row.name;
                                            this.data.icon = params.row.icon;
                                            this.data.money = params.row.money;
                                            this.data.number = parseInt(params.row.number);
                                            this.data.user_number = params.row.user_number == '不限量' ? 0 : parseInt(params.row.user_number);
                                            this.data.use_limit_type = parseInt(params.row.use_limit_type);
                                            this.data.limit_time = parseInt(params.row.limit_time);
                                            this.data.rule = params.row.rule;
                                            this.data.win_odds = parseInt(params.row.win_odds);
                                            if(this.data.use_limit_type == 2){
                                                this.limit_time = new Date(params.row.limit_time_date);
                                            }
                                            self.coupon_drawer = true;
                                        }
                                    }
                                },'修改')
                            ]);
                        }
                    }
                ],
                tr:[],  //宝藏列表
                //S设置活动宝藏抽屉
                coupon_drawer:false,
                //E设置活动宝藏抽屉
                //S添加修改的数据
                data:{
                    activity_id: sysinfo.activity_id,  //活动id
                    name:'',  //宝藏名字
                    icon:'',  //宝藏图标
                    money:'',  //宝藏价值
                    number:1,  // 投放数量
                    user_number:0, // 每个用户最多获取数量
                    use_limit_type:1,  //卡券有效期类型
                    limit_time:0,   //卡券有效时间
                    rule:'',  //卡券核销规则
                    win_odds:1   //中将几率
                },
                limit_time:new Date(),
                rules:{
                    name:[
                        {required:true,message:'奖品名称不能为空'},
                        {max:20,message:'活动名称超长'}
                    ],
                    icon:[
                        {required:true,message:'请上传奖品图片'}
                    ],
                    money:[
                        {required:true,pattern:/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,message:'请输入正确的金额'},
                    ],
                    number:[
                        {required:true,type:'number',min:1,message:'请输入正确的投放数量'},
                        {pattern:/^\d+$/,message:'请输入正确的投放数量'}
                    ],
                    user_number: [
                        {required:true,type:'number',min:0,message:'请输入正确的数量'},
                        {pattern:/^\d+$/,message:'请输入正确的数量'}
                    ],
                    limit_time:[
                        {required:true,message:'请选择正确的时间'}
                    ],
                    rule:[
                        {required:true,message:'请输入卡券的核销规则'}
                    ],
                    win_odds: [
                        {required:true,type:'number',min:1,message:'请输入正确的中奖几率'},
                        {pattern:/^\d+$/,message:'请输入正确的中奖几率'}
                    ]
                },
                submit_loading:false,  //修改添加宝藏状态
                //E添加修改的数据
            }
        },
        components:{
            ImgInput
        },
        created(){
            this.getList();
            this.findActivity();
        },
        methods:{
            //初始data
            initData(){
                this.data.name = '';
                this.data.icon = '';
                this.data.money = '';
                this.data.number = 1;
                this.data.user_number = 0;
                this.data.use_limit_type = 1;
                this.data.limit_time = '';
                this.data.rule = '';
                this.data.win_odds = 1;   //中将几率
                this.$refs['data'].resetFields();
            },
            //获取当前卡券的中奖率
            findActivity(){
                Axios.post(sysinfo.url,Qs.stringify({
                    pages:'activity',
                    doing:'easyFind',
                    activity_id:this.activity_id,
                    return:['coupon_win_odds','entity_address']
                }))
                    .then((res)=>{
                        if(res.data.status == 'success'){
                            this.coupon_win_odds = parseInt(res.data.data.coupon_win_odds);
                            this.address = res.data.data.entity_address;
                        }
                    })
                    .catch(error=>console.log(error));
            },
            //点击投放按钮
            clickPutCoupon(){
                this.coupon_drawer = true;
                this.doing = 'add';
                this.initData();
            },
            //获取活动投放列表
            getList(){
                return new Promise((success)=>{
                    Axios.post(sysinfo.url,Qs.stringify({
                        pages:'SponsorCoupon',
                        doing:'getList',
                        activity_id:this.activity_id
                    }))
                        .then((res)=>{
                            if(res.data.status == 'success'){
                                this.tr = res.data.data;
                            }else{
                                this.tr = [];
                            }
                            success();
                        })
                        .catch(error=>console.log(error));
                });
            },
            //停止投放
            changeStatus(coupon_id,status){
                Axios.post(sysinfo.url,Qs.stringify({
                    pages:'SponsorCoupon',
                    doing:'changeStatus',
                    activity_id:this.activity_id,
                    coupon_id,
                    status
                }))
                    .then((res)=>{
                        if(res.data.status == 'success'){
                            return this.getList();
                        }else{
                            this.$Message.error('操作失败');
                        }
                    })
                    .catch(error=>console.log(error));
            },
            //确认投放
            submit(valid_data){
                this.$refs[valid_data].validate((valid) => {
                    if(valid){
                        this.submit_loading = true;
                        var data = {
                            pages:'SponsorCoupon',
                            doing:this.doing,
                            data:this.data
                        }
                        data.coupon_id = this.coupon_id;
                        Axios.post(sysinfo.url,Qs.stringify(data))
                            .then((res)=>{
                                if(res.data.status == 'success'){
                                    this.$Message.success(this.doing == 'add' ? '投放成功' : '修改成功');
                                    this.initData();
                                    this.coupon_drawer = false;
                                    this.getList();
                                    this.$refs[valid_data].resetFields();
                                }else{
                                    this.$Message.error(this.doing == 'add' ? '投放失败' : '修改失败');
                                }
                                this.submit_loading = false;
                            })
                            .catch(error=>console.log(error));
                    }
                })
            },
            //卡券有效期类型改变
            limitTypeChange(){
                if(this.data.use_limit_type == 1){return;}
                if(this.data.use_limit_type == 2){
                    this.limit_time = new Date();
                    this.data.limit_time = parseInt(this.limit_time.getTime() / 1000)
                    this.rules.limit_time = [
                        {required:true,message:'请选择正确的时间'}
                    ]
                }else{
                    this.data.limit_time = null;
                    this.rules.limit_time = [
                        {required:true,type:'number',message:'请输入卡券失效天数'},
                        {pattern:/^\d+$/,message:'请输入正确的天数'}
                    ]
                }
            },
            //卡券超时时间改变
            limitDateChange(){
                this.data.limit_time = parseInt(this.limit_time.getTime() / 1000);
            }
        }
    }
</script>

<style scoped>
    .coupon{
        position:relative;
        padding:10px;
    }
    #control{
        height:45px;
        line-height:45px;
    }
    #control .put-button{
        float: right;
        margin-top: 3px;
    }
</style>
